<template>
  <div class="app-container">
    <section class="table-bar">
      <el-input v-model="query.keyword" style="width: 250px" placeholder="客户名/手机" />
      <el-button style="margin: 10px;" type="success" @click="fetchData">查询</el-button>
      <el-button style="float:right;" type="primary" @click="edit_user_show = true">添加</el-button>
      <el-table
        v-loading="loading"
        :data="customer"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="客户名">
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column align="center" label="头像">
          <template slot-scope="scope">
            <img :src="scope.row.avatar" style="width: 100px" alt="">
          </template>
        </el-table-column>
        <el-table-column align="center" label="简介">
          <template slot-scope="scope">{{ scope.row.remark }}</template>
        </el-table-column>
        <el-table-column min-width="130" align="center" label="联系电话">
          <template slot-scope="scope">{{ scope.row.phone }}</template>
        </el-table-column>
        <el-table-column align="center" label="代理商名">
          <template slot-scope="scope">{{ scope.row.agent_name }}</template>
        </el-table-column>
        <el-table-column align="center" label="国家">
          <template slot-scope="scope">{{ scope.row.country }}</template>
        </el-table-column>
        <el-table-column align="center" label="省">
          <template slot-scope="scope">{{ scope.row.province }}</template>
        </el-table-column>
        <el-table-column align="center" label="市">
          <template slot-scope="scope">{{ scope.row.city }}</template>
        </el-table-column>
        <el-table-column align="center" label="性别">
          <template slot-scope="scope">{{ getGender(scope.row.gender) }}</template>
        </el-table-column>
        <el-table-column align="center" label="语言">
          <template slot-scope="scope">{{ scope.row.language }}</template>
        </el-table-column>
        <el-table-column
          class-name="status-col"
          label="操作"
          width="220"
          align="center"
        >
          <template slot-scope="scope">
            <el-button v-show="(role == '超级管理员')&& scope.row.agent_id == null " size="mini" type="success" @click="handleSetAgent(scope.row.id)">指定代理商
            </el-button>
            <el-button v-show="(role == '超级管理员')" size="mini" type="primary" @click="handleSetRole(scope.row.id)">修改角色
            </el-button>
            <el-button v-show="(role == '超级管理员')" size="mini" type="danger" @click="delete_user(scope.row.id)">删除
            </el-button>
            <el-button v-show="(role == '管理员' || role == '员工' || role == '超级管理员')" size="mini" type="primary" @click="handleUpdateInfo(scope.row)">修改信息
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>
    <section class="pagination-bar">
      <el-pagination
        background
        :current-page="query.page"
        :page-sizes="[100, 50, 30, 10]"
        :page-size="query.limit"
        layout="sizes, prev, pager, next"
        :total="count"
        @size-change="(limit) => {query.limit = limit; fetchData()}"
        @current-change="(page) => {query.page = page; fetchData()}"
      />
    </section>
    <el-dialog title="指定代理商" :visible.sync="visible">
      <el-select v-model="setAgentData.agent_id">
        <el-option
          v-for="item in agentOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-button @click="setAgent">提交</el-button>
    </el-dialog>
    <el-dialog title="指定角色" :visible.sync="roleVisible">
      <el-select v-model="setRoleData.role_id">
        <el-option
          v-for="item in roleOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-button @click="setRole">提交</el-button>
    </el-dialog>
    <el-dialog title="修改信息" :visible.sync="infoVisible">
      <el-form ref="form" :model="tempInfoData">
        <el-form-item label="用户名">
          <el-input v-model="tempInfoData.name" />
        </el-form-item>
        <el-form-item label="简介">
          <el-input v-model="tempInfoData.remark" />
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="tempInfoData.phone" />
        </el-form-item>
        <el-form-item label="国家">
          <el-input v-model="tempInfoData.country" />
        </el-form-item>
        <el-form-item label="省">
          <el-input v-model="tempInfoData.province" />
        </el-form-item>
        <el-form-item label="市">
          <el-input v-model="tempInfoData.city" />
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="tempInfoData.gender">
            <el-option
              key="1"
              label="男"
              :value="1"
            />
            <el-option
              key="2"
              label="女"
              :value="2"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <el-button @click="updateInfo">提交</el-button>
      <el-upload
        style="margin-top: 50px"
        :action="this.updateAvatarUrl"
        name="file"
        :file-list="fileList"
        :data="{id: tempInfoData.id,}"
        :headers="this.updateHeader"
        :on-success="fetchData"
      >
        <el-button size="small" type="primary">上传头像</el-button>
      </el-upload>
    </el-dialog>

    <el-dialog title="新增用户(默认密码123456)" :visible.sync="edit_user_show">
      <el-form ref="form1" :model="new_user">
        <el-form-item label="用户名">
          <el-input v-model="new_user.name" />
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="new_user.phone" />
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="new_user.gender">
            <el-option
              key="1"
              label="男"
              :value="1"
            />
            <el-option
              key="2"
              label="女"
              :value="2"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <el-button @click="add_customer">提交</el-button>
    </el-dialog>
  </div>
</template>

<script>
import api from '../../api'
import { getToken } from '../../utils/auth'

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'role'
    ])
  },
  data() {
    return {
      updateAvatarUrl: `${process.env.VUE_APP_BASE_API}/api/management/customer/updateAvatar`,
      updateHeader: {
        'Authorization': 'bearer' + getToken()
      },
      customer: '',
      count: 0,
      query: {
        page: 1,
        limit: 10,
        keyword: ''
      },
      loading: false,
      visible: false,
      setAgentData: {
        agent_id: '',
        customer_id: ''
      },
      agentOptions: '',
      roleVisible: false,
      setRoleData: {
        user_id: '',
        role_id: ''
      },
      roleOptions: '',
      infoVisible: false,
      tempInfoData: '',
      new_user: {
        id: 0,
        name: '',
        phone: '',
        gender: ''
      },
      edit_user_show: false,
      fileList: []
    }
  },
  created() {
    this.fetchData()
    this.getRoleOptions()
    this.getAgentOptions()
  },
  methods: {
    getRoleOptions() {
      api.role.getRoleOptions().then(res => {
        if (res.err_no === 0) {
          this.roleOptions = res.data
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    getAgentOptions() {
      api.customer.getAgentOptions().then(res => {
        if (res.err_no === 0) {
          this.agentOptions = res.data
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    delete_user(id) {
      this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.customer.delete_user({ id: id }).then(res => {
          if (res.err_no === 0) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.fetchData()
          } else {
            this.$notify.error({
              title: '错误',
              message: res.err_msg
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    fetchData() {
      api.customer.getHistory(this.query).then(res => {
        if (res.err_no === 0) {
          this.customer = res.data.data
          this.count = res.data.count
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    add_customer() {
      api.customer.updateInfo(this.new_user).then(res => {
        if (res.err_no === 0) {
          this.fetchData()
          this.edit_user_show = false
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    getGender(gender) {
      switch (gender) {
        case 1:
          return '男性'
        case 2:
          return '女性'
        default:
          return '未知'
      }
    },
    handleSetAgent(id) {
      this.visible = true
      this.setAgentData = {
        agent_id: '',
        customer_id: id
      }
    },
    handleSetRole(id) {
      this.roleVisible = true
      this.setRoleData = {
        user_id: id,
        role_id: ''
      }
    },
    handleUpdateInfo(row) {
      this.infoVisible = true
      this.tempInfoData = row
    },
    setAgent() {
      api.customer.setAgent(this.setAgentData).then(res => {
        if (res.err_no === 0) {
          this.fetchData()
          this.visible = false
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    updateInfo() {
      api.customer.updateInfo(this.tempInfoData).then(res => {
        if (res.err_no === 0) {
          this.fetchData()
          this.infoVisible = false
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    setRole() {
      api.customer.setRole(this.setRoleData).then(res => {
        if (res.err_no === 0) {
          this.fetchData()
          this.roleVisible = false
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
